<template>
  <div class="container">
    <van-nav-bar fixed title="详情" @click-left="$router.back()"  left-arrow/>
    <div class="content-box">
      <div class="art-tit">{{list.title}}</div>
      <div class="art-desc">
        <span>时间:2021-11-02</span>
        <span>分类：{{list.keywords}}</span>
        <span>阅读({{list.click}})</span>
      </div>
      <van-divider />
      <div class="art-content" v-html="list.content">
        </div>
    <van-cell>
			<h3 slot="title" class="group-title">相关推荐</h3>
      <RecommendList v-for="item in recommend" :key="item.id" :item="item" :itemId="item.id"></RecommendList>
		</van-cell>
		<recommend-list :recommend="recommend"/>
    <van-grid clickable class="bot" :column-num="2">
      <van-grid-item icon="like-o" text="收藏" :class="{bgc:isCollect}" @click="changeType(1)"/>
      <van-grid-item icon="thumb-circle-o" text="点赞" :class="{bgc:isLike}" @click="changeType(2)"/>
    </van-grid>[]
  </div>
  </div>
</template>

<script>
import RecommendList from "../components/recommend-list.vue";
import {setCollect} from '../api/detail'
export default {
  name: "Show",
  components: { RecommendList },
  async created() {
    // console.log(this.$route.query.id);
    const id = this.$route.query.id;
    console.log(id);
    await this.$store.dispatch("detail/getDetail", { id });
    this.list = this.$store.state.detail.data.info;
    console.log(this.list);
    this.isCollect = this.list.isCollect
    this.isLike = this.list.isLike
    this.recommend = this.$store.state.detail.data.recommend
  },
  data() {
    return {
      list: {},
      recommend:[],
      isCollect:false,
      isLike:false
    };
  },
  methods:{
   async changeType(type){
      if(type === 1){
        this.isCollect = !this.isCollect
        await  setCollect({type,article_id:this.list.id,action:this.isCollect?"add" : "del"})
       this.$toast(this.isCollect?'收藏成功' : '取消收藏')
      }else{
        this.isLike = !this.isLike
        await  setCollect({type,article_id:this.list.id,action:this.isCollect?"add" : "del"})
        this.$toast(this.isLike?'收藏成功' : '取消收藏')
      }
    }
  }
};
</script>
<style scoped lang="less">
.content-box {
  padding: 20px 20px;
}
.art-tit {
  font-size: 36px;
  line-height: 44px;
  margin-bottom: 20px;
}
.art-desc {
  font-size: 28px;
  color: #aaa;
  span {
    margin-right: 20px;
  }
}
.bot {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/deep/ .van-grid-item__content {
  padding: 20px 0;
}
/deep/ .van-grid-item__text {
  margin-top: 0 !important;
}
.group-title {
  color: #1989fa;
}
.bgc{
  color: brown;
}
</style>